<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>LiveKit WebRTC 推流 Demo</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    .video-container { margin: 20px 0; }
    button { padding: 10px 15px; margin: 5px; cursor: pointer; }
    .status { margin: 10px 0; padding: 10px; background: #f0f0f0; }
    .note { margin: 20px 0; padding: 15px; background: #e8f4ff; border-left: 4px solid #4a90e2; }
    .steps { background: #f9f9f9; padding: 15px; border-radius: 5px; }
    .steps ol { padding-left: 20px; }
  </style>
</head>
<body>
  <h1>LiveKit WebRTC 推流测试</h1>
  
  <div class="note">
    <h3>使用说明</h3>
    <p>本页面用于测试基于WebRTC的视频推流，并通过LiveKit Egress转为RTMP流。</p>
    <p>点击"开始推流"按钮后，将请求摄像头和麦克风权限，并自动设置RTMP转推。</p>
  </div>
  
  <div class="video-container">
    <h2>本地预览</h2>
    <video id="localVideo" autoplay muted width="640" height="360"></video>
  </div>
  
  <div class="controls">
    <button id="btnPublish">开始推流</button>
    <button id="btnStop">停止推流</button>
  </div>
  
  <div class="status" id="status">状态: 未连接</div>
  
  <div class="config">
    <h3>当前配置</h3>
    <p>房间名: room1</p>
    <p>用户名: user1</p>
    <p>RTMP转推地址: rtmp://localhost:1935/live/room1</p>
  </div>
  
  <div class="steps">
    <h3>完整使用流程</h3>
    <ol>
      <li>点击"开始推流"按钮</li>
      <li>允许浏览器访问摄像头和麦克风</li>
      <li>等待状态显示"推流成功"</li>
      <li>运行Python脚本接收RTMP流: <code>python webrtc_receive.py</code></li>
      <li>完成后点击"停止推流"按钮</li>
    </ol>
  </div>

  <script src="main.js"></script>
</body>
</html>